import {Hbox} from "../layout/Hbox";
import {Button} from "./Button";
/**
 * Created by quxiangqian on 2018/6/19.
 */
/**
 * Created by quxiangqian on 2018/6/5.
 */
export class PerPageBar extends React.Component {
    state={
        pageSize:15,
        total:1000,
        currPage:1,
    }
    goTo=(index)=>{

        let start=(this.state.pageSize*index-this.state.pageSize)+1;
        let end=start+this.state.pageSize-1;
        //this.reLoad();
        if(this.props.goTo){
            this.props.goTo(index,start-1,end-1,this.state.pageSize);
        }

    }

    reLoad=()=>{
        this.setState({currPage:this.state.currPage})
    }

    first=()=>{
        this.state.currPage=1;
        this.goTo(1)
    }
    next=()=>{
        if(this.state.currPage<Math.ceil(this.state.total/this.state.pageSize))
        {

            this.state.currPage++;
            this.goTo(this.state.currPage)
        }


    }
    end=()=>{
        this.state.currPage=Math.ceil(this.state.total/this.state.pageSize);
        this.goTo(this.state.currPage);

    }
    prev=()=>{
        if(this.state.currPage>1)
        {
            this.state.currPage--;
            this.goTo(this.state.currPage)
        }
    }

    render(){
        this.state.total=this.props.total;
        this.state.pageSize=this.props.pageSize;
        let countPage=Math.ceil(this.state.total/this.state.pageSize);
        return (
            <Hbox css="perpagebar" style={this.props.style}>
                <Button css={this.state.currPage!==1?"first":"first disabled"} onClick={this.first}>首页</Button>
                <Button css={this.state.currPage!==1?"prev":"prev disabled"} onClick={this.prev}>上页</Button>
                <Button css={this.state.currPage!==countPage?"next":"next disabled"} onClick={this.next}>下页</Button>
                <Button css={this.state.currPage!==countPage?"end":"end disabled"} onClick={this.end}>尾页</Button>
                {!this.props.short?<div className="info">总记录({this.state.total}) 当前页({this.state.currPage})/总页({countPage})</div>:''}
            </Hbox>
        )
    }
}